<template>
  <div>
    <el-card class="box">
      <!-- 顶部 -->

      <div class="title">
        <el-button type="primary" @click="edBtn(0)">添加房产 </el-button>

        <div class="rightBTN">
          <el-button style="margin-left: 0px">
            <el-dropdown>
              <span class="el-dropdown-link">
                全部分类<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in classlist "
                  :key="item"
                  @click.native="ceshi(item)"
                >{{ item }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button>

          <el-button style="margin-left: 0px">
            <el-dropdown>
              <span class="el-dropdown-link">
                全部经纪<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item

                  v-for="item in classlist2 "
                  :key="item.id"
                  @click.native="ceshi2(item)"
                >{{ item }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button>

          <el-input v-model="jklist.title_contains" placeholder="请输入关键字" class="shurukang" />
          <!-- <el-input v-model="key" placeholder="请输入关键字" class="shurukang" /> -->
          <el-button @click="search(3)">搜索</el-button>
        </div>
      </div>
      <hr>
      <!-- 顶部 -->
      <el-table :data="hList" border>
        <el-table-column label="封面">
          <template #default="{ row }">
            <img :src="row.image" class="staffPhoto">
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" />
        <el-table-column label="标签" prop="tags">
          <template #default="{row}">
            <el-button
              v-for="item in row.tags "
              :key="item"
              type="success"
              class="tag"
              prop="tags"
              size="mini"
              plain
              disabled
            >  {{ item }}  </el-button>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" />
        <el-table-column label="分类" prop="category.id" />
        <el-table-column label="经纪" prop="content" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="图片">
          <template #default="{ row } ">
            <span
              v-for="item in row.photos "
              :key="item.id"
            >      <img
              :src="item"
              class="staffPhotoMini"
            >
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row } ">
            <el-button size="small" type="primary" @click="edBtn(row.id)">  编辑</el-button>
            <el-button size="small" type="danger" @click="delBtn(row.id)">  删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row />

      <el-pagination
        :total="totals"
        layout="prev, pager, next"
        :page-size=" jklist._limit"
        align="middle"
        @current-change="currentChange"
      />

      <!-- 添加标签 -->

    </el-card>
    <!-- 弹窗 -->
    <el-dialog style="height:920px;margin-top:1px;">

      <el-form :model="tcList" class="shuRuKuang">
        <el-form-item label="经纪" label-width="60px">
          <el-select v-model="tcList.content" label="经纪" label-width="60px">

            <el-option label="" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类" label-width="60px">

          <el-input v-model="tcList.title" />
        </el-form-item>
        <el-form-item label="标题" required label-width="60px">
          <el-input v-model="tcList.title" :rules="rules" prop="name" />
        </el-form-item>
        <el-form-item label="标签" label-width="60px">
          <el-button
            v-for="item in tcList.tags "
            :key="item"
            size="medium "
            type="primary"

            plain
            @click="DelTag(item)"
          >  {{ item }}  <i class="el-icon-close" />
          </el-button>
          <el-button plain size="medium" @click="addTag()">
            新标签
            <i class="el-icon-plus" />
          </el-button>
        </el-form-item>

        <el-form-item label="地址" label-width="60px">

          <div class="addressIpu">
            <el-select v-model="tcList.address" style="width:150px" placeholder="选择区域" label="123">
              <el-option :label="tcList.address" label-width="20px" value="22" />
            </el-select>

            <el-input v-model="tcList.address" />
          </div>
        </el-form-item>
        <el-form-item label="价格" label-width="60px">
          <el-input v-model="tcList.price" />
        </el-form-item>

        <el-form-item label="描述" label-width="60px">
          <el-input v-model="tcList.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="内容" label-width="60px">
          <el-input v-model="tcList.desc" />
        </el-form-item>

        <el-form-item label="介绍图片" label-width="68px">
          <div class="df">   <upPic />
            <upPic />
          </div>

        </el-form-item>
        <el-form-item label="封面" label-width="68px">
          <upPic
            ref="picData"
            @picUrl="urlUp"
          />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="OkBtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗 -->
    <!-- <addTags ref="newtag">123</addTags> -->
  </div>
</template>

<script>

import upPic from '@/components/upPic/index.vue'
import { deltHouselist, editHouselist, fenyeList, getHouselist, numList, seachList, upHouselist } from '@/api/constant/house-api'
import AddTags from './addTags.vue'

export default {

  components: { upPic, AddTags },
  data() {
    return {

      hList: [],
      page: {
        size: 5,
        pages: 1
      },
      totals: 10,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,

      classlist: [],
      classlist2: [],
      tcList: {
        id: '',
        address: '',
        agent: '',
        category: '',
        content: '',
        desc: '',
        image: '',
        photos: '',
        price: '',
        tags: '',
        title: ''

      },

      isCloned: false,
      dialogFormVisible: false,
      jklist: {
        _limit: 2,
        _start: 0

      },

      rules: {
        name: [{ required: true, message: '标题', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }]

      }
    }
  },

  created() {
    this.houseList()
  },
  methods: {

    // 图片上传
    urlUp(url) {
      console.log(url)
      this.tcList.image = url
    },

    // 切换页面
    async currentChange(newPage) {
      this.jklist._start = newPage
      // this.page.pages = newPage

      this.hList = await fenyeList(this.jklist)
    },
    ceshi(data) {
      this.jklist.address = data
      this.search(1)
    },
    ceshi2(data) {
      this.jklist.desc = data
      this.search(2)
    },

    // 筛选搜索
    async search(arr) {
      const res = await seachList()
      console.log(this.jklist, 259)
      console.log(res, 323)
      if (this.jklist.title_contains === undefined || '') {
        this.houseList()
        return
      }
      if (arr === 3) {
        this.hList = res.filter(item => (item.title.includes(this.jklist.title_contains)))
      }
      if (arr === 1) {
        this.hList = res.filter(item => item.address !== null).filter(item => item.address.includes(this.jklist.address))
      }
      if (arr === 2) {
        this.hList = res.filter(item => item.desc !== null).filter(item => (item.desc.includes(this.jklist.desc)))
      }
    },
    // 删除图片

    addTag() {
      // this.$refs.newtag.dialogFormVisibleER = true
      // const a = this.$refs.newtag
      // console.log(a)
    },
    DelTag(tag) {
      console.log(tag, 2911)
      this.tcList.tags = this.tcList.tags.filter(item => item !== tag

      )
    },

    // 初始化渲染页面
    async houseList() {
      this.totals = await numList()

      this.hList = await fenyeList(this.jklist)
      console.log(this.hList)
      const b = this.hList.map(item => item.address).filter(item => item !== null).filter(item => item.length > 1)

      const c = this.hList.map(item => item.desc).filter(item => item !== null).filter(item => item.length > 1)
      function unique(arr) {
        return Array.from(new Set(arr))
      }
      this.classlist = unique(b)
      this.classlist2 = unique(c)
    },

    // 编辑按钮
    async  edBtn(data) {
      this.dialogFormVisible = true
      if (data !== 0) {
        const res = await getHouselist(data)

        this.$nextTick(() => {
          this.$refs.picData.fileList = [{ url: res.image }]
          this.tcList = res
        })
      }
    },

    // 确定上传数据
    async OkBtn() {
      const id = this.tcList.id
      console.log(id, 331)
      if (id) {
        await editHouselist(id, this.tcList)
      } else {
        console.log(this.tcList)
        await upHouselist(this.tcList)
      }

      this.tcList.id = ''

      // // this.$refs.hList.resetFields()
      this.houseList()
      this.dialogFormVisible = false
    },
    // 删除row
    async  delBtn(id) {
      await deltHouselist(id)
      this.houseList()
    }

  }
}
</script>

<style lang="scss"   scoped>

.df{

  display: flex;
}
::v-deep.el-dialog{

 padding-top: 4px;
 margin-top: 20px;
}
::v-deep.el-dialog__body{

 padding:0 22px;

}
::v-deep.el-dialog__footer{
margin-top: 0;
}
::v-deep.el-upload{
  width: 80px;
  height: 80px;
  line-height: 100px;
  font-size: 16px;
}
.addressIpu{
display: flex;
}
.addressInpt{

  height: 0px;

  background-color: #0a0;
  display: flex;

}
.actoveBtn{

  background-color: #0a0;
}

.active{

  background-color: red;
}
.staffPhotoMini{

  width: 80px;
  height: 80px;
}
.tag{

margin: 5px;

}
hr {
  border: 1px solid rgb(232, 232, 232);
}
.box {
  margin: 20px;
  padding: 10px;
}
.rightBTN {
  display: flex;
}
.shurukang {
  width: 300px;
}

.title {
  display: flex;

  justify-content: space-between;
}
.staffPhoto{

  height: 100px;
}
.cover{
  ::v-deep.el-upload--picture-card {
    display: none;
  }
}

</style>>

